<!-- 开发部：大底入库采集  蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <Find :OriginalFilter="{ static: true }" :formList="formList2" :searchImg="false" />
    <div class="mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '10px 10px 0' }" class="mt10">
        <div slot="header" class="f16">
          <span style="font-weight: 600" class="mr55">扫描下单条码</span>
        </div>
        <div class="flex mt10 f14" style="align-items: center; justify-content: space-between">
          <div class="">PS:扫描指令单标签时，请确认光标置于此栏位</div>
          <div class="">
            <span class="mr10">扫描条码</span>
            <el-input v-model="scanCode" style="width: 414px; height: 25px; font-size: 20px" />
          </div>
          <div>
            <span class="mr10">扫描信息</span>
            <el-input v-model="scanInfo" disabled style="width: 200px; height: 25px" />
          </div>
          <!-- <div>
          <span class="mr10">厂商信息</span>
          <el-input style="width: 100px; height: 25px" />
        </div> -->
        </div>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">大底入库扫描记录</h1>
        <Table
          :isLoading="isLoading"
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :outTableHeight="160"
          :summaryData="summaryData"
          @confirmChange="confirmChange"
          summary
          @selectList="selectTable4List"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '0px 5px 5px' }">
        <PageModule :PageData="{ total: total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
      </el-card>
    </div>
    <el-drawer v-model="drawer" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <div class="flex AIC" style="flex-direction: column">
        <Find :searchImg="false" :formList="formList10" @findClicked="findClicked10" />
        <div class="flex mt10 JCC" style="width: 100%; background-color: white">
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <h1 class="f16">选择外发指令</h1>
            <Table
              :tableHeader="tableHeader10"
              :tableData="tableData10"
              selection
              class="mt10"
              :outTableHeight="150"
              @selectList="selectTableList10"
              @currentRow="currentRow10"
              @confirmChange="confirmChange10"
            />
          </el-card>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
import LoginWork from '@/utils/LoginWork'
import type { formListType } from '@/components/Find/index.vue'
import { AcquisitionModel, selectList } from '@/plugins/mixin'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PrototypingAcquisition'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const scanCode = ref('')
const scanInfo = ref('')
watch(
  scanCode,
  debounce(async (val) => {
    if (!scanCode.value) return
    const res = (await LoginWork.post(`/pack/getSolePurPreMtlOther`, {
      purNo: scanCode.value,
      choose: 1
      // prodType: radio.value
    })) as any
    if (res.code === 200) {
      drawer.value = true
      tableData10.value = res.data.map((item: any) => {
        item.change = 'Y'
        return item
      })
      getTableList()
    } else {
      JMessage.error(res.message)
      scanInfo.value = res.message
    }
  }, 500)
)
const imgList = ref([])
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令号',
    inputValue: ''
  },
  {
    type: 'select',
    selectP: '品牌',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入货号',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '客户交期',
    dateValue: ''
  },
  {
    type: 'select',
    selectP: '采集员',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '完成日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  },
  {
    type: 'button',
    checkboxLabel: '删除扫描记录'
  },
  {
    type: 'button',
    checkboxLabel: '查询所有采集信息'
  }
])
const formList2 = ref([
  {
    type: 'checkbox',
    checkboxLabel: '正单',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '补单',
    checked: true
  },
  {
    type: 'select',
    selectP: '厂商',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入补单原因',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入补单数量',
    inputValue: ''
  }
])
const tableHeader = ref([
  {
    label: '采集类型',
    prop: 'prodType',
    width: 70
  },
  {
    label: '指令号',
    prop: 'lotNo',
    width: 120
  },
  {
    label: '品牌',
    prop: 'brand',
    width: 70
  },
  {
    label: '货号',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '号码',
    prop: 'sizeNo',
    width: 50
  },
  {
    label: '订单数量',
    prop: 'orderQty',
    width: 70
  },
  // {
  //   label: "生产数量",
  //   prop: "prodQty",
  // },
  {
    label: '客户交期',
    prop: 'deliveryDate'
  },
  {
    label: '厂商',
    prop: 'workerName'
  },
  {
    label: '入库数量',
    prop: 'prodQty'
  },
  //  {
  //   label: "生产员工",
  //   prop: "workerName",
  // },
  {
    label: '采集员',
    prop: 'prodUserName'
  },
  {
    label: '责任单位',
    prop: 'dutyDept'
  },
  {
    label: '补单原因',
    prop: 'dutyReason'
  },
  {
    label: '扫描时间',
    prop: 'prodDate'
  },
  {
    type: 'img',
    label: '图片',
    prop: 'photoPath',
    srcList: imgList
  }
])
tableHeader.value.forEach((item: any) => {
  if (item.label === '生产数量' || item.label === '派工数量') {
    item.change = false
  } else {
    item.change = 'Y'
  }
})
// 表一模块
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '删除扫描记录') {
    if (selectTableLists.value.length === 0) {
      JMessage.warning('请选择要删除的记录')
      return
    }
    const res = await LoginWork.post<any, any>(`/pack/collect/deleteCollectAll?choose=${14}`, selectTableLists.value)
    if (res.code === 200) {
      JMessage.success('删除成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '查询所有采集信息') {
    getTableList(2)
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 7,
    num: 0
  }
])
// 分页器
const currentPage = ref(1)
// 定义每页显示数量
const pageSize = ref(40)
// 定义总数量
const total = ref(0)
// 定义每页显示数量改变事件
const handleSizeChange = (val: number) => {
  // 将参数赋值给pageSize
  pageSize.value = val
  // 调用获取表格列表函数
  getTableList()
}
// 定义当前页改变事件
const handleCurrentChange = (val: number) => {
  // 将参数赋值给currentPage
  currentPage.value = val
  // 调用获取表格列表函数
  getTableList()
}

// 获取表数据
const getTableList = debounce(async (type = 1) => {
  // 设置加载状态为true
  isLoading.value = true
  // 调用接口获取数据
  let tableDataList = await service.post<any, any>(`/pack/collect/collectAllList?flag=${type}`, {
    // 选择类型
    choose: '14',
    // 完成日期结束时间
    completeEndTime:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期')
        ?.dateValue?.[1] || '',
    // 完成日期开始时间
    completeStartTime:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期')
        ?.dateValue?.[0] || '',
    // 客户交期结束时间
    deliveryEndTime:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客户交期')
        ?.dateValue?.[1] || '',
    // 客户交期开始时间
    deliveryStartTime:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客户交期')
        ?.dateValue?.[0] || '',
    // 指令号
    lotNo:
      formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令号'
      )?.inputValue || '',
    // 采集类型 1:正单 2：补单 含有 试板/大货的传入试板/大货
    prodStep: '',
    // 采集员
    prodUserName:
      formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '采集员')
        ?.selectValue || '',
    // 货号
    style:
      formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入货号'
      )?.inputValue || '',
    // 生产员工
    workerUser:
      formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '采集员')
        ?.selectValue || '',
    // 品牌
    brand:
      formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')?.selectValue ||
      '',
    // 当前页码
    pageNum: currentPage.value,
    // 每页数量
    pageSize: pageSize.value
  })
  // 设置加载状态为false
  isLoading.value = false
  // 设置图片列表
  imgList.value = tableDataList.list.map((item: any) => {
    return item.photoPath
  })

  // 设置表格数据
  tableData.value = tableDataList.list.map((item: any) => {
    // 设置交期日期
    if (item.deliveryDate) item.deliveryDate = item.deliveryDate.split(' ')[0]
    item.change = true
    return item
  })
  // 设置总数量
  total.value = tableDataList.total
  // 设置汇总数据
  summaryData.value[0].num = tableDataList.prodTotal
}, 500)
// 挂载时调用

onMounted(() => {
  getTableList()
})
// 监听表单数据变化时调用
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)

const getSelectList = async () => {
  await selectList(formList, () => service.get('/pcOrder/getPcOrderDataRsjCondition'))
  await selectList(formList2, () => service.get('/yield/getCutYieldCondition'))
  AcquisitionModel(14, formList)
}
// 当组件挂载完成时，调用getSelectList函数
onMounted(() => {
  getSelectList()
})

const selectTableLists = ref([])
// 定义一个函数，用于接收一个参数selectedList，并将参数selectedList的值赋值给selectTable4Lists的值
const selectTable4List = (selectedList: any) => {
  selectTableLists.value = selectedList
}

const formList10 = ref([
  {
    type: 'input',
    inputPlaceholder: '采购单号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '指令号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '品牌',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '货号',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '大底请购日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '选择入库'
  }
])
const drawer = ref(false)
const findClicked10 = async (content: string) => {
  if (content === '选择入库') {
    if (selectedLists10.value.length === 0) {
      JMessage.warning('请选择要入库的数据')
      return
    }
    const res = (await LoginWork.post('/pack/scanSolePurPreMtlOther', selectedLists10.value)) as any
    if (res.code === 200) {
      JMessage.success(res.message)
      drawer.value = false
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
}
const tableHeader10 = ref([
  {
    change: true,
    label: '类型',
    prop: 'purType'
  },
  {
    change: true,
    width: '150px',
    label: '采购单号',
    prop: 'purNo'
  },
  {
    change: true,
    width: '150px',
    label: '指令号',
    prop: 'orderId'
  },
  {
    change: true,
    label: '品牌',
    prop: 'brand'
  },
  {
    change: true,
    label: '货号',
    prop: 'style'
  },
  {
    change: true,
    label: '样品类型',
    prop: 'sampleType'
  },
  {
    change: true,
    label: '颜色',
    prop: 'color'
  },
  {
    change: true,
    label: '号码',
    prop: 'sizeNo'
  },
  {
    change: true,
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    change: true,
    label: '请购日期',
    prop: 'purDate'
  },
  {
    change: true,
    label: '请购数量',
    prop: 'purQty'
  },
  {
    change: true,
    label: '未入库量',
    prop: 'unQty'
  },
  {
    label: '可入库量',
    prop: 'hasQty'
  }
])
const tableData10 = ref([])
const isLoading10 = ref(true)
const getTableList10 = debounce(async () => {
  isLoading10.value = true
  let tableDataList = await service.post<any, any>('/pack/getSolePurPreMtlOther', {
    purNo: scanCode.value,
    brand: formList10.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')
      ?.selectValue,
    orderId: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '指令号'
    )?.inputValue,
    purEndDate: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '大底请购日期'
    )?.dateValue?.[1],
    purStartDate: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '大底请购日期'
    )?.dateValue?.[0],
    style: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '货号'
    )?.inputValue,
    choose: 2 //	有无欠数(Y/N)	string	body	true
  })
  isLoading10.value = false
  tableData10.value = tableDataList
  currentRow10()
}, 500)
const selectedLists10 = ref([])
const selectTableList10 = (selectedList: any) => {
  selectedLists10.value = selectedList
}
const currentTable10Row = ref({}) as any
const currentRow10 = async (row: any = tableData10.value[0]) => {
  currentTable10Row.value = row
}
watch(
  () =>
    formList10.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList10()
  }
)
const confirmChange10 = (row: any) => {
  if (Number(row.hasQty) > Number(row.purQty)) {
    JMessage.error('入库数量不能大于未入库数量')
    row.hasQty = row.purQty
  }
}

const confirmChange = async (row: any) => {
  const res = (await LoginWork.post('/pack/updatePcOrderStatus', row)) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
  } else {
    JMessage.error(res.message)
    getTableList()
  }
}
</script>

<style lang="less" scoped></style>
